<template>
	<view v-show="pageShow">
		<view class="uni-form-item">
			<view class="title">货品代码</view>
			<view class="uni-input-container">
				<view class="uni-input-view">
					<input class="uni-input" v-model="goodsCode" :focus="true" @input="handleInputGoodsCode" @confirm="handleConfirmGoodsCode"
					 placeholder="请扫描货品代码" />
					<image src="/static/scan.png" class="scan" @click="handleScanGoodsCode" />
				</view>
				<image src="/static/search.png" class="search" @click="handleConfirmGoodsCode" />
			</view>
		</view>
		<view class="list-card" style="margin-top: 30rpx;">
			<uni-card :title="'出库单号：' + bill.billNo">
				<view class="item">
					<view class="item-content">
						<label>状态：</label>
						<text class="status" :class="{warning: bill.outBillState != '500'}">{{bill.outBillStateLabel || '-'}}</text>
					</view>
					<view class="item-content">
						<label>类型：</label>
						<text>{{bill.outOrderTypeLabel || '-'}}</text>
					</view>
				</view>
				<view class="item">
					<view class="item-content">
						<label>外部单号：</label>
						<text>{{bill.outOrderNo || '-'}}</text>
					</view>
					<view class="item-content">
						<label>预期发货：</label>
						<text>{{bill.requiredOutTime ? $formatter.formatDate(new Date(bill.requiredOutTime)) : '-'}}</text>
					</view>
				</view>
				<view class="item-footer">
					<view class="footer-item">
						<label>总预期量</label>
						<text>{{bill.totalExpect ? parseInt(bill.totalExpect) : '-'}}</text>
					</view>
					<view class="footer-item">
						<label>总已拣量</label>
						<text>{{computeTotalPickingDeliver(pickingList) + computeTotalPickingDeliver(deliverList)}}</text>
					</view>
					<view class="footer-item">
						<label>总已发量</label>
						<text>{{computeTotalPickingDeliver(deliverList)}}</text>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="list-card" style="margin-top: 50rpx;" v-if="!!goodsList.length">
			<uni-card title="货品明细">
				<view class="list-item-detail" v-for="item in goodsList" :key="item.id">
					<view class="item">
						<view>
							<label>货品代码：</label>
							<text>{{item.goodsCode || '-'}}</text>
						</view>
					</view>
					<view class="item">
						<view>
							<label>货品名称：</label>
							<text>{{item.goodsName || '-'}}</text>
						</view>
					</view>
					<view class="item">
						<view class="item-content">
							<label>状态：</label>
							<text>{{item.outBillStateName || '-'}}</text>
						</view>
						<view class="item-content">
							<label>包装代码：</label>
							<text>{{item.packCode || '-'}}</text>
						</view>
					</view>
					<view class="item-footer">
						<view class="footer-item">
							<label>预期数量</label>
							<text>{{item.expectQuantity ? parseInt(item.expectQuantity) : '-'}}</text>
						</view>
						<view class="footer-item">
							<label>拣货数量</label>
							<text>{{computeTotalPickingDeliver(pickingList.filter(v => v.goodsCode === item.goodsCode)) + computeTotalPickingDeliver(deliverList.filter(v => v.goodsCode === item.goodsCode))}}</text>
						</view>
						<view class="footer-item">
							<label>发货数量</label>
							<text>{{computeTotalPickingDeliver(deliverList.filter(v => v.goodsCode === item.goodsCode))}}</text>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<no-data style="margin-top: 100rpx;" :visible="!goodsList.length" title="暂无数据"></no-data>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue';
	import noData from '@/components/no-data/no-data.vue';

	export default {
		components: {
			uniCard,
			noData
		},
		data() {
			return {
				pageShow: false,
				goodsCode: null,
				bill: {},
				originGoodsList: [],
				goodsList: [],
				pickingList: [],
				deliverList: []
			}
		},
		onLoad(e) {
			this.bill = JSON.parse(e.bill);
			uni.showLoading({
				title: '加载中'
			});
			this.getDetail();
		},
		methods: {
			computeTotalPickingDeliver(list) {
				if (!list.length) {
					return 0;
				}
				return list.map(v => parseInt(v.amount)).reduce((m, n) => m + n);
			},
			getDetail() {
				Promise.all([
					this.$api.outWarehouse.detail(this.bill.id),
					this.$api.outWarehouse.outBillCargoList({
						outBillId: this.bill.id
					}),
					this.$api.outWarehouse.pickingDeliverList({
						outBillId: this.bill.id,
						state: 300,
					}),
					this.$api.outWarehouse.pickingDeliverList({
						outBillId: this.bill.id,
						state: 500,
					})
				]).then(res => {
					Object.assign(this.bill, {
						ownerId: res[0].ownerId,
						outBillState: res[0].outBillState,
						outBillStateLabel: res[0].outBillStateLabel
					});
					this.originGoodsList = res[1];
					this.goodsList = res[1];
					this.pickingList = res[2];
					this.deliverList = res[3];
					this.pageShow = true;
					uni.hideLoading();
				}, () => uni.hideLoading());
			},
			handleInputGoodsCode() {
				if (!this.goodsCode) {
					this.goodsList = this.originGoodsList;
				}
			},
			handleScanGoodsCode() {
				this.$scan(res => {
					this.goodsCode = res;
					this.handleConfirmGoodsCode();
				});
			},
			handleConfirmGoodsCode() {
				if (this.goodsCode) {
					this.$api.goods.listScan({
						ownerId: this.bill.ownerId,
						code: this.goodsCode
					}).then(res => {
						const _goodsCodeList = res.data.map(v => v.code.toLowerCase());
						this.goodsList = this.originGoodsList.filter(v => _goodsCodeList.includes(v.goodsCode.toLowerCase()));
					});
				} else {
					this.goodsList = [...this.originGoodsList];
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-form-item .title {
		width: 120rpx;
	}

	.list-card /deep/ .uni-card {
		margin: 0 0 30rpx 0;
	}

	.list-card /deep/ .uni-card .uni-card__header {
		padding: 10rpx 24rpx;
	}
</style>
